<template>
	<view class="login">
		<swiper :vertical="true" style="height: 100vh;" :current="tabIndex" @change="changeTabIndex">
			<swiper-item>
				<view class="login-tel">
					<view class="tel-main">
						<!-- #ifndef MP-WEIXIN -->
							<view class="close" @tap="goBack">
								<image class="close-img" src="../../static/img/close.png" mode=""></image>
							</view>
						<!-- #endif -->
						<view class="logo">
							<image class="logo-img" src="../../static/img/logo.png" mode=""></image>
						</view>
						<view class="tel" @tap="goLoginTel">手机号注册</view>
						<loginOther />
						<view class="login-go" @tap="switchoverLogin(1)">
							<view>已有账号，去登录</view>
							<image src="../../static/img/down.png" mode=""></image>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="login-tel">
					<view class="tel-main">
						<view class="close close-center">
							<!-- #ifndef MP-WEIXIN -->
								<view  @tap="goBack">
									<image class="close-img" src="../../static/img/close.png" mode=""></image>
								</view>
							<!-- #endif -->
							<view class="login-go" @tap="switchoverLogin(0)">
								<image class="close-img" src="../../static/img/up.png" mode=""></image>
								<view class="close-center-text">没有账号,去注册</view>
							</view>
							<view></view>
						</view>
						<view class="login-form">
							<view class="login-user form-input">
								<text class="input-text">账号</text>
								<input type="text" v-model="userName" placeholder="请输入手机号/用户名">
							</view>
							<view class="login-pass form-input">
								<text class="input-text">密码</text>
								<input type="password" v-model="userPwd" placeholder="6~16位字符">
							</view>
						</view>
						<view class="login-quick">
							<view>忘记密码?</view>
							<view>免密登录</view>
						</view>
						<view class="tel submit" @tap="submit">登 录</view>
						<view class="reminder">温馨提示:您可以选择免密登录，更加方便</view>
						<loginOther />
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import loginOther from "@/components/loginOther/loginOther.vue"
	import $http from "@/common/api/request.js"
	export default {
		data() {
			return {
				tabIndex:0,
				//用户输入的内容
				userName:"",
				userPwd:"",
				//验证的规则
				rules:{
					userName:{
						rule:/\S/,
						msg:"账号不能为空"
					},
					userPwd:{
						rule:/^[0-9a-zA-Z]{6,16}$/,
						msg:"密码应该为6~16位字符"
					}
				}
			};
		},
		methods:{
			switchoverLogin(index){
				this.tabIndex = index
			},
			changeTabIndex(e){
				this.tabIndex = e.detail.current
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			//点击登录
			submit(){
				if(!this.validate("userName")) return
				if(!this.validate("userPwd")) return
				//表单验证成功
				$http.request({
					url: "/user/login",
					method:"POST",
					data:{
						userName:this.userName,
						userPwd:this.userPwd
					}
				}).then(res => {
					let data = res.data
					uni.showToast({
						title:data.msg,
						icon:"none"
					})
					if(data.code){
						//登录成功
						this.$store.commit("login",data.data)
						uni.navigateBack({
							delta:1
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			},
			//判断验证是否符合规则
			validate(key){
				let bool = true
				if(!this.rules[key].rule.test(this[key])){
					uni.showToast({
						title:this.rules[key].msg,
						icon:"none"
					})
					bool = false
				}
				return bool
			},
			//手机号注册
			goLoginTel(){
				uni.navigateTo({
					url:"/pages/login-tel/login-tel"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		.login-tel {
			width: 100vw;
			height: 100vh;

			.tel-main {
				padding: 0 20rpx;

				.close {
					/* #ifdef APP-PLUS */
					padding: 120rpx 0;

					/* #endif */
					.close-img {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.logo {
					display: flex;
					justify-content: center;
					padding-bottom: 50rpx;
				}

				.tel {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					background-color: #49bdfb;
					border-radius: 40rpx;
				}
				.submit{
					margin-top: 80rpx;
				}
				// 跳转已有帐号
				.login-go {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-top: 20rpx;
					}
				}

				//已有账号布局
				.close-center {
					/* #ifndef MP-WEIXIN */
						display: flex;
					/* #endif */

					view {
						flex: 1;

						.close-img {
							margin-top: 0;
						}

						.close-center-text {
							margin-top: 20rpx;
						}
					}
				}

				//表单
				.login-form {
					padding-top: 100rpx;

					.form-input {
						display: flex;
						align-items: baseline;
						border-bottom: 2rpx solid #f7f7f7;
						font-size: 32rpx;
						padding: 40rpx 0;

						.input-text {
							padding-right: 30rpx;
						}

						input {
							font-size: 28rpx;
						}
					}
				}

				.login-quick {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
				}

				.reminder {
					color: #ccc;
					padding: 20rpx 0;
					text-align: center;
				}
			}
		}
	}
</style>
